import React from 'react';
import { Link } from 'react-router-dom';
import { Table, Popconfirm, Button, message, Modal, Form, Input } from 'antd';
import BreadCrumb from '@/view/comps/breadcrub/breadcrub';
const FormItem = Form.Item;

const FORMINPUT = {
	labelCol: { span: 4 },
	wrapperCol: { span: 8 }
};
export default class TagList extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			currentPage: 1,
			tagList: [],
			visible: false,
			confirmLoading: false,
			name: '',
			desc: '',
		};
		this.tag_id = '';
	}

	componentDidMount() {
		this.getTagList();
	}
	getTagList = () => {
		AJAX({
			url: '/findTag',
			data: {}
		}).then(res => {
			this.setState({
				tagList: res.data || []
			});
		}, err => message.error(err.msg));
	}
	deleteTag = (_id) => {
		AJAX({
			url: '/deleteTag',
			data: {_id}
		}).then(res => {
			message.success('删除成功');
			this.getTagList();
		}, err => message.error(err.msg));
	}
	updateTag = () => {
		this.setState({confirmLoading: true});
		const reqParam = {
			name: this.state.name,
			desc: this.state.desc,
			_id: this.tag_id
		};
		AJAX({
			url: '/updateTag',
			data: reqParam,
		}).then(res => {
			message.success('修改成功');
			this.getTagList();
			this.setState({confirmLoading: false, visible: false});
		}, err => {
			message.error(err.msg);
			this.setState({confirmLoading: false});
		});
	}

	renderTable = () => {
		const columns = [
			{
				title: '名称',
				align: 'center',
				dataIndex: 'name',
			}, 
			{
				title: '创建时间',
				align: 'center',
				dataIndex: 'createTime',
			},
			{
				title: '描述',
				align: 'center',
				dataIndex: 'desc',
			}, 
			{
				title: '操作',
				align: 'center',
				dataIndex: 'operation',
				render: (text, row) => {
					return (
						<React.Fragment>
							<span className='blue mr-10' onClick={() => {
								this.setState({
									visible: true,
									name: row.name,
									desc: row.desc,
								});
								this.tag_id = row._id;
							}}>修改</span>
							<Popconfirm 
								title='确定要删除吗?' 
								okText='确定'
								cancelText='取消'
								onConfirm={() => this.deleteTag(row._id)}>
								<span className='blue ml-10'>删除</span>
							</Popconfirm>
						</React.Fragment>
					);
				},
			}
		];
		return (
			<Table 
				dataSource={this.state.tagList} 
				columns={columns} 
				bordered
				rowKey='_id'
				pagination={{current: this.state.currentPage, onChange: this.onChangePage, showTotal: total => `总计 ${total} 条`}}
			/>
		);
	}

	renderModal = () => {
		const { visible, confirmLoading, name, desc } = this.state;
		return (
			<Modal title='修改标签信息'
				visible={visible}
				onOk={this.updateTag}
				confirmLoading={confirmLoading}
				onCancel={() => this.setState({visible: false})}
			>
				<Form>
					<FormItem {...FORMINPUT} label='名称'>
						<Input
							value={name} 
							onChange={e => this.setState({name: e.target.value})}
							placeholder='请输入标签名称' />
					</FormItem>

					<FormItem {...FORMINPUT} label='标签描述'>
						<Input 
							value={desc}
							onChange={e => this.setState({desc: e.target.value})}
							placeholder='请输入标签描述' />
					</FormItem>
				</Form>
			</Modal>
		);
	}
	render() {
		return (
			<div>
				<BreadCrumb bread={[{title: 'Dashboard', link: '/'}, {title: '标签管理'}]}/>
				<div className='page-container'>
					<Link to={'/app/tag/addTag'}><Button type='primary' className='mb-10'>新增标签</Button></Link>
					{this.renderTable()}
					{this.renderModal()}
				</div>
			</div>
		);
	}

	onChangePage = (page) => {
		this.setState({currentPage: page});
	}
}
